<template>
  <div class="page-container-content">
    <div class="page-config-left">
      <div class="page-config-title">
        <span class="title">菜单配置</span>
      </div>
      <el-menu default-active="1" class="el-menu-vertical-demo">
        <el-submenu index="1">
          <template slot="title">
            <!-- <i class="el-icon-location"></i> -->
            <span>系统管理</span>
          </template>
          <el-menu-item index="1-1">用户管理</el-menu-item>
          <el-menu-item index="1-2">权限管理</el-menu-item>
          <el-menu-item-group title="角色管理">
            <el-menu-item index="1-3">角色管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="2">
          <!-- <i class="el-icon-menu"></i> -->
          <span slot="title">配置管理</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <!-- <i class="el-icon-document"></i> -->
          <span slot="title">日志管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="page-config-right">
      <div class="page-config-form">
        <div class="page-config-title">
          <span class="title">基础信息</span>
          <div class="page-config-btn">
            <span><svg-icon icon="select" /> 保存</span>
            <span><svg-icon icon="add" /> 新建</span>
            <span @click="exportCode">
              <svg-icon icon="code-file" /> 生成Vue代码
            </span>
            <span><svg-icon class="icon" icon="delete" /> 删除菜单</span>
          </div>
        </div>
        <vxe-form
          :data="pageConfig"
          title-align="right"
          title-width="100"
          prevent-submit
          title-colon
        >
          <vxe-form-item title="页面编码" field="id" span="8">
            <template v-slot>
              <vxe-input
                v-model="pageConfig.id"
                placeholder="页面编码"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="父级编码" field="parentId" span="8">
            <template v-slot>
              <vxe-input
                v-model="pageConfig.parentId"
                placeholder="父级编码"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="排序" field="sort" span="8">
            <template v-slot>
              <vxe-input
                v-model="pageConfig.sort"
                placeholder="页面排序"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="主表" field="pTable" span="8">
            <template v-slot>
              <vxe-input
                v-model="pageConfig.pTable"
                placeholder="主表"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="主表别名" field="pTableAs" span="8">
            <template v-slot>
              <vxe-input
                v-model="pageConfig.pTableAs"
                placeholder="默认与实际表名相同"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="主表名" field="pTableName" span="8">
            <template v-slot>
              <vxe-input
                v-model="pageConfig.pTableName"
                placeholder="中文主表名"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="实体类" field="class" span="8">
            <template v-slot>
              <vxe-input
                v-model="pageConfig.class"
                placeholder="请输入名称"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="细表" field="tTable" span="8">
            <template v-slot>
              <vxe-input
                v-model="pageConfig.tTable"
                placeholder="请输入名称"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="细表名" field="tTableName" span="8">
            <template v-slot>
              <vxe-input
                v-model="pageConfig.tTableName"
                placeholder="中文细表名"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <!-- <vxe-form-item align="right" span="24" collapse-node>
          <template v-slot>
            <vxe-button status="primary" @click="exportCode"
              >生成代码</vxe-button
            >
            <vxe-button status="primary" @click="searchEvent">保存</vxe-button>
            <vxe-button @click="resetEvent">重置</vxe-button>
          </template>
        </vxe-form-item> -->
        </vxe-form>
      </div>
      <div class="page-config-table">
        <div class="page-config-title">
          <span class="title">表结构</span>
          <div class="page-config-btn">
            <span><svg-icon icon="code-table" /> 同步表结构</span>
            <span @click="insertEvent()"><svg-icon icon="add" /> 添加</span>
            <span @click="insertEvent(-1)">
              <svg-icon icon="editable" /> 插入
            </span>
            <span><svg-icon icon="delete" /> 删除</span>
          </div>
        </div>
        <vxe-table
          stripe
          border
          show-overflow
          keep-source
          ref="xTable"
          class="table-scrollbar"
          style="width: 100%"
          height="520px"
          align="center"
          :data="tableData"
          :edit-config="{
            trigger: 'click',
            mode: 'cell',
            icon: 'fa fa-pencil',
            showStatus: true,
          }"
        >
          <vxe-table-column
            type="checkbox"
            fixed="left"
            width="60"
          ></vxe-table-column>
          <vxe-table-column
            type="seq"
            fixed="left"
            title="序号"
            width="60"
          ></vxe-table-column>
          <vxe-table-column
            field="label"
            fixed="left"
            title="显示列名"
            sortable
            width="100"
            :edit-render="{ name: 'input', defaultValue: '默认的名字' }"
          ></vxe-table-column>
          <vxe-table-column
            field="name"
            title="列名"
            fixed="left"
            sortable
            width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"
          ></vxe-table-column>
          <vxe-table-column
            field="key"
            title="主键"
            width="100"
            :edit-render="{
              name: '$select',
              options: [
                { label: '是', value: 1 },
                { label: '否', value: 0 },
              ],
            }"
          ></vxe-table-column>
          <vxe-table-column
            field="type"
            title="字段类型"
            width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"
          ></vxe-table-column>
          <vxe-table-column
            field="show"
            title="是否显示"
            width="100"
            :edit-render="{
              name: '$select',
              options: [
                { label: '是', value: 1 },
                { label: '否', value: 0 },
              ],
            }"
          ></vxe-table-column>
          <vxe-table-column
            field="showType"
            title="列显示类型"
            width="150"
            :edit-render="{ name: 'input', defaultValue: 18 }"
          ></vxe-table-column>
          <vxe-table-column
            field="width"
            title="列宽"
            width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"
          ></vxe-table-column>
          <vxe-table-column
            field="search"
            title="是否查询"
            width="100"
            :edit-render="{
              name: '$select',
              options: [
                { label: '是', value: 1 },
                { label: '否', value: 0 },
              ],
            }"
          ></vxe-table-column>
          <vxe-table-column
            field="searchColumn"
            title="查询行"
            width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"
          ></vxe-table-column>
          <vxe-table-column
            field="searchRow"
            title="查询列"
            width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"
          ></vxe-table-column>
          <vxe-table-column
            field="searchType"
            title="查询类型"
            width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"
          ></vxe-table-column>
          <vxe-table-column
            field="edit"
            title="是否可编辑"
            width="150"
            :edit-render="{
              name: '$select',
              options: [
                { label: '是', value: 1 },
                { label: '否', value: 0 },
              ],
            }"
          ></vxe-table-column>
          <vxe-table-column
            field="editColumn"
            title="编辑行"
            width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"
          ></vxe-table-column>
          <vxe-table-column
            field="editRow"
            title="编辑列"
            sortable
            width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"
          ></vxe-table-column>
          <vxe-table-column
            field="editType"
            title="编辑类型"
            width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"
          ></vxe-table-column>
          <vxe-table-column
            field="required"
            title="是否必填"
            width="100"
            :edit-render="{
              name: '$select',
              options: [
                { label: '是', value: 1 },
                { label: '否', value: 0 },
              ],
            }"
          ></vxe-table-column>
          <vxe-table-column
            field="readonly"
            title="是否只读"
            width="100"
            :edit-render="{
              name: '$select',
              options: [
                { label: '是', value: 1 },
                { label: '否', value: 0 },
              ],
            }"
          ></vxe-table-column>
          <vxe-table-column
            field="dataSource"
            title="数据源"
            width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"
          ></vxe-table-column>
        </vxe-table>
      </div>
    </div>
    <el-dialog
      title="导出代码"
      :visible.sync="importJsonDialog"
      width="900px"
      :show-close="true"
      class="small-padding-dialog"
      v-dialog-drag
    >
      <el-tabs
        type="border-card"
        class="no-box-shadow no-padding"
        v-model="activeCodeTab"
      >
        <el-tab-pane label="Vue" name="vue">
          <code-editor
            :mode="'html'"
            :readonly="true"
            v-model="vueCode"
            :user-worker="false"
          />
        </el-tab-pane>
        <el-tab-pane label="HTML" name="html">
          <code-editor
            :mode="'html'"
            :readonly="true"
            v-model="htmlCode"
            :user-worker="false"
          />
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="copyVueCode"
          >复制Vue代码
        </el-button>

        <el-button type="primary" size="small" @click="saveVueCode"
          >导出Vue代码
        </el-button>
        <el-button size="small" @click="importJsonDialog = false"
          >关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CodeEditor from "@/components/code-editor/index.vue";
import { generateCode } from "@/utils/code-generator";
import { saveAs } from "file-saver";
export default {
  components: {
    CodeEditor,
  },
  data() {
    return {
      pageConfig: {
        name: "",
      },
      activeCodeTab: "vue",
      importTemplate: "",
      vueCode: null,
      htmlCode: null,
      importJsonDialog: false,
      formJson: {
        form: JSON.stringify({
          name: "name",
          age: 0,
        }),
      },
      tableData: [
        {
          label: "姓名",
          name: "name",
          key: 1,
        },
        {
          label: "地址",
          name: "address",
          key: 0,
        },
      ],
      sexList: [],
      menuList: [
        {
          id: 1,
          label: "系统管理",
          children: [{ label: "子节点-0" }, { label: "子节点-1" }],
        },
        {
          id: 2,
          label: "数据源管理",
        },
      ],
    };
  },
  created() {},
  methods: {
    exportCode() {
      this.vueCode = generateCode(this.formJson);
      this.htmlCode = generateCode(this.formJson, "html");
      this.importJsonDialog = true;
    },
    saveVueCode() {
      this.saveAsFile(this.vueCode, `index.vue`);
    },
    copyVueCode() {
      this.$copyText(this.vueCode).then((res) => {
        this.$message({
          message: `复制成功`,
          type: "success",
        });
      });
    },
    importJson() {
      this.importTemplate = JSON.stringify(`test`, null, "  ");
      this.importJsonDialog = true;
    },
    saveAsFile(fileContent, defaultFileName) {
      this.$prompt("", "文件名", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: "index", // 可选
        inputErrorMessage: "输入不能为空", // 可选
        inputValidator: (value) => {
          // 可选，点击按钮时，对文本框里面的值进行验证
          if (!value) {
            return "输入不能为空";
          }
        },
      })
        .then(({ value }) => {
          console.log(value);
          const name = `${value}.vue`;
          console.log(name);
          const fileBlob = new Blob([fileContent], {
            type: "text/plain;charset=utf-8",
          });
          saveAs(fileBlob, name);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    searchEvent() {
      this.$XModal.message({ message: "查询事件", status: "info" });
    },
    resetEvent() {
      this.$XModal.message({ message: "重置事件", status: "info" });
    },
    insertEvent(row) {},
    getInsertEvent() {
      let insertRecords = this.$refs.xTable.getInsertRecords();
      this.$XModal.alert(insertRecords.length);
    },
    getSelectionEvent() {
      let selectRecords = this.$refs.xTable.getCheckboxRecords();
      this.$XModal.alert(selectRecords.length);
    },
    saveEvent() {
      // const { insertRecords, removeRecords, updateRecords } =
      //   this.$refs.xTable.getRecordset();
      // this.$XModal.alert(
      //   `insertRecords=${insertRecords.length} removeRecords=${removeRecords.length} updateRecords=${updateRecords.length}`
      // );
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.page-config-left {
  width: 246px;
  padding: 16px 6px;
  border-right: 1px solid #dcdfe6;
}
.page-config-right {
  width: calc(100% - 246px);
  padding: 16px;
}
.page-config-table {
  width: 100%;
  overflow: hidden;
}
.page-config-title {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-image: linear-gradient(
    to right,
    #40a0ff63 5%,
    rgba(255, 255, 255, 0.1) 95%
  );
  // box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);

  .title {
    font-weight: bold;
    font-size: 18px;
  }

  .page-config-btn {
    flex: 1;
    padding: 0 6px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #5a5f5e;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    & span {
      cursor: pointer;
      margin-right: 10px;

      &:hover {
        color: #409eff;
      }
    }
  }

  &::before {
    display: block;
    content: "";
    width: 4px;
    height: 98%;
    margin-right: 6px;
    background: #409eff;
  }
}
::v-deep {
  .el-dialog__body {
    padding: 0px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

  .el-tabs--border-card > .el-tabs__content {
    padding: 0px;
  }

  .el-tabs--border-card {
    background: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: none;
  }

  .el-menu {
    border-right: none !important;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: #fff;
  }

  .el-menu-item,
  .el-submenu__title {
    height: 36px;
    line-height: 36px;
    list-style: none;
  }
}
// /*滚动条整体部分*/
// .table-scrollbar ::-webkit-scrollbar {
//   width: 10px;
//   height: 10px;
// }
// /*滚动条的轨道*/
// .table-scrollbar ::-webkit-scrollbar-track {
//   background-color: #fff;
// }
// /*滚动条里面的小方块，能向上向下移动*/
// .table-scrollbar ::-webkit-scrollbar-thumb {
//   background-color: rgba(0, 0, 0, 0.3);
//   border-radius: 5px;
//   border: 1px solid #f1f1f1;
//   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
// }
// .table-scrollbar ::-webkit-scrollbar-thumb:hover {
//   background-color: #a8a8a8;
// }
// .table-scrollbar ::-webkit-scrollbar-thumb:active {
//   background-color: #787878;
// }
// /*边角，即两个滚动条的交汇处*/
// .table-scrollbar ::-webkit-scrollbar-corner {
//   background-color: #ffffff;
// }
</style>